<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑跑特工</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./utils/vant.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./utils/vue.js"></script>
    <script src="./utils/vant.js"></script>
    <!-- 引入axios（如果sendData是基于axios的） -->
    <script src="./utils/axios.js"></script>
    <!-- 自定义样式 -->
    <style>
        .contain {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        ul {
            text-align: center;
        }

        ul li {
            margin: 15px 0px;
            height: 15px;
            line-height: 15px;
        }

        .total {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <van-notice-bar left-icon="volume-o" text="下面展示全部下单信息"></van-notice-bar>
        <van-cell title="选择查询日期" :value="date" @click="showCalendar = true" is-link></van-cell>
        <van-calendar v-model="showCalendar" @confirm="onConfirm" :min-date="minDate"></van-calendar>
        <div class="total">今日下单的总额：<span>{{ this.total }}</span> </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
        <div class="contain">
            <ul>
                <li>乐跑id</li>
                <li v-for="(item, index) in this.list" :key="index">{{ item.userId }}</li>
            </ul>
            <ul>
                <li>公里</li>
                <li v-for="(item, index) in this.list" :key="index">{{ item.km }}</li>
            </ul>
            <ul>
                <li>次数</li>
                <li v-for="(item, index) in this.list" :key="index">{{ item.times }}</li>
            </ul>
            <ul>
                <li>开始跑的时间</li>
                <li v-for="(item, index) in this.list" :key="index">{{ item.startDate }}</li>
            </ul>
            <ul>
                <li>状态</li>
                <li v-for="(item, index) in this.list" :key="index">{{ item.msg }}</li>
            </ul>

        </div>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                date: "",
                showCalendar: false,
                total: "",
                minDate: new Date(2024, 9, 15),
            }
        },
        methods: {
            //获取日期
            formatDate(date) {
                return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            },
            //日期确认按钮
            async onConfirm(date) {
                this.showCalendar = false;
                this.date = this.formatDate(date);
                const result = await axios('http://71hi31ml3628.vicp.fun/order/selectByDate', {
                    params: { date: this.date }, headers: {
                        'Token': `${localStorage.getItem('lptoken')}`
                    }
                })
                if (result.status === 200) {
                    this.list = result.data.data
                    this.total = result.data.data.length
                    this.$notify({ type: 'success', message: '数据接收成功' })
                } else {
                    this.$notify({ type: 'danger', message: '日期选择错误' })
                }
            },
        },
    })
</script>

</html>